<template>
	<view class="conter">
		<view class="details_box">
			<!-- 上半部份 -->
			<view class="name_box">
				<view style="display: flex; align-items: center">
					<view class="header_box">
						<u--image width="119rpx" height="119rpx" radius="28rpx" :src="imgUrl + MyGuildDetail.guildAvatar" alt=""></u--image>
					</view>
					<view class="box_name">
						<view class="">{{ MyGuildDetail.guildName }}</view>
						<view style="font-size: 28rpx; margin-top: 21rpx">团长：{{ MyGuildDetail.presidentName }}</view>
					</view>
				</view>
			</view>
			<!-- 上半部份 -->
			<view class="viability_box">
				<view class="">火力值：{{ MyGuildDetail.influence ? MyGuildDetail.influence : 0 }}</view>
				<view style="margin-top: 24rpx">总Go Go Duck数量：{{ MyGuildDetail.monNumber }}</view>
			</view>
			<view class="button_box">
				<view @click="goguanli" class="buttonone" v-if="MyGuildDetail.identity == 2">天团管理</view>
				<view class="buttonone" style="margin-left: 24rpx" v-if="MyGuildDetail.identity == 2">天团任务</view>
			</view>
			<!-- 下半部分 -->
		</view>
		<!-- 成员名单 -->
		<view class="members_box">
			<view class="up_data">
				<view>成员管理</view>
				<view>火力值</view>
				<view style="">头衔</view>
			</view>
			<!-- list列表 -->
			<u-list v-if="guildList.length != 0" height="830rpx" @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in guildList" :key="index">
					<view class="list_box">
						<view class="list_one">
							<view style="display: flex; align-items: center">
								<view class="hesder_box">
									<u--image radius="50%" width="91rpx" height="91rpx" :src="imgUrl + item.avatar" alt=""></u--image>
								</view>
								<view class="name_list">{{ item.name }}</view>
							</view>
							<view class="number_list">{{ item.influence }}</view>
							<view class="tou_xian">
								{{ item.identity == 1 ? '粉丝' : item.identity == 2 ? '团长' : item.identity == 3 ? '副团长' : item.identity == 4 ? '团饭' : '' }}
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
			<!-- list列表 -->
			<view v-if="guildList.length == 0">
				<image style="width: 280rpx; height: 280rpx; margin: 100rpx 200rpx" src="../../static/images/fighting.gif" mode=""></image>
			</view>
		</view>
		<!-- 成员名单 -->
	</view>
</template>

<script>
import { toast, showConfirm, tansParams } from '@/utils/common';
import { getGuildDetail, exitGuild, getGuildMemberList, setIdEntity } from '@/api/union/union.js';
import config from '@/config.js';
import { getUserAdmin } from '@/utils/auth.js';
export default {
	data() {
		return {
			show: false,
			value: 0,
			id: '',
			type: '',
			imgUrl: config.imgUrl,
			MyGuildDetail: {},
			onshow: false,
			curPage: 1,
			curPageSize: 20,
			userAdmin: getUserAdmin(),
			totalSize: 0,
			guildList: [],
			guildId: ''
		};
	},
	onLoad(option) {
		this.type = option.type;
		this.id = option.id;
		// console.log(this.userAdmin, "option.id")
	},
	created() {
		this.getMyGuildDetail();
	},
	methods: {
		async setPosition(item) {
			let param = {
				idEntity: item.identity, // 您要设置的 idEntity 值
				memeberId: item.memeberId // 假设 item 中包含了 memberID
			};
			// 使用 $forceUpdate 方法通知组件重新渲染
			const data = await setIdEntity(param);
			if (data.code == 200) {
				this.$modal.showToast('设置成功');
			}
		},
		async getMyGuildDetail() {
			let param = {};
			param.id = this.id;
			param.type = this.type;
			const res = await getGuildDetail(param);
			// console.log(res, 'ppp');
			this.MyGuildDetail = res.data;
			this.guildId = res.data.id;
			this.getGuildList();
		},
		// 退出天团
		async confirmquit() {
			let param = {};
			param.id = this.guildId;
			const data = await exitGuild(param);
			// console.log(data, '退出');
			this.show = false;
		},
		//工会成员列表
		async getGuildList() {
			let param = {};
			param.curPage = this.curPage;
			param.curPageSize = this.curPageSize;
			param.guildId = this.guildId;
			const data = await getGuildMemberList(param);
			// console.log(data, '天团成员');
			let _this = this;
			data.data.pageData.map((i) => {
				_this.guildList.push(i);
			});
			console.log(this.guildList, '天团成员');
			this.totalSize = data.data.totalSize;
		},
		// 成员列表详情
		getInfo(item) {
			if (this.userAdmin.nickname == this.MyGuildDetail.presidentName) {
				uni.navigateTo({
					url: `/pages/Union/trousers?memberId=${item.memeberId}`
				});
			}
		},
		// list加载事件
		scrolltolower() {
			//加载时候判断是否还有下一页
			if (this.guildList.length < this.totalSize) {
				this.curPage++;
				//则还有下一页
				this.getGuildList();
			}
		},
		cancel() {
			this.show = false;
		},
		goquit() {
			uni.navigateTo({
				url: '/pages/tiantuan/quit'
			});
		},
		handleGoBack() {
			uni.navigateTo({
				url: '/pages/tiantuan/tiantuan'
			});
		},
		goguanli() {
			uni.navigateTo({
				url: `/pages/tiantuan/management?guildId=${this.guildId}`
			});
		}
	}
};
</script>
<style scoped lang="less">
::v-deep .uni-select {
	background: #eef862;
	border-radius: 38rpx;
}
::v-deep .uni-select__input-text {
	font-size: 24rpx;
	font-weight: 700;
	color: #353535;
}
::v-deep .uni-select__selector {
	color: #353535;
	font-size: 24rpx;
	font-weight: 700;
	border-radius: 38rpx;
	background: #eef862;
}
::v-deep .uni-select__selector-item {
	border-radius: 38rpx;
	background: #eef862 !important;
}
::v-deep .uni-popper__arrow {
	top: 0;
	left: 1000rpx;
}
page {
	background-color: #1a1a1a;
}
.conter {
	padding: 34.88rpx 35rpx;
	.Back {
		width: 100%;
		height: 112rpx;
		display: flex;
		align-items: center;
		margin-bottom: 34.88rpx;
		justify-content: space-between;
		font-size: 35rpx;
		font-family: ' zcoolqingkehuangyouti, zcoolqingkehuangyouti';
		font-weight: 500;
		color: #ffffff;
		.quan_box {
			width: 110rpx;
			height: 52rpx;
			font-family: 'font';
			background: #ff5359;
			border-radius: 202rpx;
			font-size: 28rpx;
			font-weight: 700;
			color: #ffffff;
			text-align: center;
			line-height: 52rpx;
		}
	}
	.close {
		width: 602rpx;
		height: 850rpx;
		background: #1a1a1a;
		border-radius: 35rpx;
		padding: 0 41rpx 0 41rpx;
		border: 3rpx solid #acacac;

		.title {
			color: #ffffff;
			font-weight: 400;
			font-size: 45rpx;
			text-align: center;
			margin-top: 41rpx;
			font-family: 'zcoolqingkehuangyouti, zcoolqingkehuangyouti';
		}

		view {
			color: #acacac;
			font-size: 28rpx;
			font-weight: 400;
		}

		.button_box {
			display: flex;
			margin-top: 76rpx;
			justify-content: space-between;

			.button_one {
				width: 227rpx;
				height: 77rpx;
				color: #ffffff;
				font-size: 31rpx;
				font-weight: 700;
				line-height: 80rpx;
				background: #ff5359;
				text-align: center;
				border-radius: 17rpx;
			}
		}
	}

	.butt_box {
		width: 680rpx;
		height: 117rpx;
		color: #ffffff;
		font-weight: 700;
		font-size: 42rpx;
		line-height: 120rpx;
		background: #ff5359;
		text-align: center;
		margin-top: 100rpx;
		border-radius: 392rpx;
	}

	.details_box {
		width: 680rpx;
		height: 406rpx;
		border-radius: 52rpx;
		border: 3rpx solid #2f2f2f;
		background: linear-gradient(180deg, #191919 0%, #282828 100%);

		.name_box {
			display: flex;
			padding: 24rpx 24rpx 0 24rpx;
			justify-content: space-between;

			.header_box {
				width: 119rpx;
				height: 119rpx;
				background: #d8d8d8;
				border-radius: 28rpx;
			}

			.box_name {
				color: #ffffff;
				font-size: 31rpx;
				font-family: 'font';
				font-weight: 700;
				margin-left: 20rpx;
			}

			.icon {
				width: 63rpx;
				height: 63rpx;
				background: #272727;
				border-radius: 50%;
			}
		}

		// 下半部分
		.viability_box {
			padding: 24rpx 24rpx 0 24rpx;
			color: #ffffff;
			font-size: 28rpx;
			font-family: 'font';
			font-weight: 700;
		}

		.button_box {
			display: flex;
			padding: 33rpx 24rpx;

			.buttonone {
				width: 201rpx;
				height: 75rpx;
				color: #353535;
				font-size: 28rpx;
				font-family: 'font';
				font-weight: 700;
				text-align: center;
				line-height: 80rpx;
				background: #eef862;
				border-radius: 38rpx;
			}
		}
	}

	// 成员名单
	.members_box {
		width: 680rpx;
		height: 980rpx;
		margin-top: 26rpx;
		border-radius: 52rpx;
		border: 3rpx solid #2f2f2f;
		background: linear-gradient(180deg, #191919 0%, #282828 100%);

		.up_data {
			margin: auto;
			width: 520rpx;
			display: flex;
			color: #ffffff;
			font-weight: 700;
			font-size: 31rpx;
			font-family: 'font';
			padding: 34.88rpx 0 34.88rpx 55rpx;
			justify-content: space-between;
		}

		.list_box {
			padding: 0 24rpx;
			.list_one {
				display: flex;
				width: 631rpx;
				height: 115rpx;
				background: #1b1b1b;
				align-items: center;
				margin-bottom: 30rpx;
				border-radius: 368rpx;
				padding: 0 20rpx 0 12rpx;
				justify-content: space-between;
				border: 2rpx solid #2f2f2f;

				.hesder_box {
					width: 91rpx;
					height: 91rpx;
					border-radius: 44rpx;
				}

				.name_list {
					width: 120rpx;
					font-size: 35rpx;
					font-family: 'simplified';
					font-weight: 400;
					color: #9e9e9e;
					margin-left: 20rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					line-height: 42rpx;
				}

				.number_list {
					width: 200rpx;
					text-align: center;
					font-size: 28rpx;
					padding: 0 0 0 30rpx;
					font-family: 'font';
					font-weight: 700;
					color: #9e9e9e;
				}

				.tou_xian {
					width: 136rpx;
					height: 73rpx;
					color: #353535;
					font-size: 28rpx;
					font-weight: 700;
					font-family: 'font';
					background: #eef862;
					line-height: 73rpx;
					text-align: center;
					border-radius: 38rpx;
				}
			}
		}
	}
}
</style>
